<template>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
        <!-- 弹窗表单 -->
        <el-form :inline="false" :model="addForm" size="mini" class="demo-form-inline" label-width="120px" :rules="dataRule" ref="ruleForm">
            <!-- #.流程节点 -->

            <el-form-item label="节点名称" prop="flowName">
                <el-input v-model="addForm.stepName" placeholder="请输入节点名称"  clearable></el-input>
            </el-form-item>

            <el-form-item label="审批类型">
                <el-radio v-model="radio" label="0">选择角色</el-radio>
                <el-radio v-model="radio" label="2">指定审批人</el-radio>
                <el-radio v-model="radio" label="3">指定创建者</el-radio>
            </el-form-item>

            <el-form-item label="选择角色" prop="roleType" v-if="radio == 0">
                <el-select v-model="roleTypeName" placeholder="请选择" style="width: 100%">
                    <el-option v-for="(item, index) in roleOptions" :key="index" :label="item.rolename" :value="item.roleId"> </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="驳回后动作" prop="rejectToName">
                <el-select v-model="rejectToName" placeholder="请选择" style="width: 100%" :disabled="rejectToNameSelectedDis">
                    <el-option v-for="(item, index) in rejectToNamePtions" :key="index" :label="item.Name" :value="item.Id"> </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="通过后动作" prop="approveAction">
                <el-select v-model="approveAction" placeholder="请选择" style="width: 100%" :disabled="approveActionSelectedDis">
                    <el-option v-for="(item, index) in approveActionPtions" :key="index" :label="item.Name" :value="item.Id"> </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="通知类型">
                <el-checkbox-group v-model="checkList" @change="handleChecked">
                    <el-checkbox label="YES" :key="YES">短信</el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <!-- #.保存和提交按钮 -->
            <el-form-item>
                <el-button @click="dialogVisible = false" style="padding: 10px 40px">取 消</el-button>
                <el-button type="primary" style="padding: 10px 40px" @click="addAndEditSubmit('ruleForm')">保存</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
import API from '@/api';
import upload from '../../components/upLoad';
import cloneDeep from 'lodash/cloneDeep';

export default {
    components: {
        upload
    },

    data() {
        return {
            //el-dialog 弹窗
            dialogTitle: '新增',
            dialogVisible: false,
            type: 1,

            //表单
            addForm: {
                stepName: ''
            },
            dataRule: {},

            radio: '0', //选择审批类型： 默认按角色 0-按角色, 2-审批时指定用户
            checkList: [], //通知类型： NO: 无通知; YES: 接收通知

            //选择角色
            roleTypeName: '',
            roleOptions: [],

            //驳回类型
            rejectToName: '无',
            rejectToNameSelectedDis: false,
            rejectToNamePtions: [
                { Id: 'NORMAL', Name: '无', selected: true },
                { Id: 'ZERO', Name: '无金额额度', selected: false },
                { Id: 'ZERO_ASSIGN_ZJ', Name: '无金额额度并指定资金方', selected: false },
                { Id: 'EDIT_CONTACT', Name: '商户重新上传合同', selected: false },
                { Id: 'ASSIGN_APPROVER', Name: '下一步需指定审批人', selected: false },
                { Id: 'ASSIGN_CREATER', Name: '指定下一步审批人是创建者', selected: false }

            ],
            //通过后动作
            approveAction: '无',
            approveActionSelectedDis: false,
            approveActionPtions: [
                { Id: 'NORMAL', Name: '无', selected: true },
                { Id: 'ZERO', Name: '无金额额度', selected: false },
                { Id: 'UP_CONTACT', Name: '客户上传合同', selected: false },
                { Id: 'LOAN_APPROVE', Name: '放款操作', selected: false },
                { Id: 'ZERO_ASSIGN_ZJ', Name: '无金额额度并指定资金方', selected: false },
                { Id: 'ASSIGN_APPROVER', Name: '下一步需指定审批人', selected: false },
                { Id: 'ASSIGN_CREATER', Name: '指定下一步审批人是创建者', selected: false },
            ]
        };
    },

    methods: {
        //- 弹窗关闭
        handleClose() {
            this.clearForm();
            this.dialogVisible = false;
        },

        //- 清空新增中的数据
        clearForm() {
            this.addForm = {
               
            };
        },

        //- 初始化
        init(fatherItem, sonItem, type) {
            this.dialogVisible = true;
            this.type = type;
            this.getSelectRoleList(fatherItem, sonItem); //获取角色数据

            if (type == 2) {
                //编辑
                this.dialogTitle = '编辑';
                this.addForm = sonItem;
                //处理编辑 选择赋值
                if (sonItem != null) {
                    this.radio = '' + sonItem.approverType;

                    this.rejectToName = this.getRejectActionName(sonItem.rejectAction); //驳回类型 (通过id获取姓名)
                    this.approveAction = this.getApproveActionName(sonItem.approveAction); //通过后动作

                    //通知类型： NO: 无通知; YES: 接收通知
                    if (sonItem.smsType != null && sonItem.smsType == 'YES') {
                        this.checkList = ['YES'];
                    }
                }
            } else {
                // 新增
                this.dialogTitle = '新增';
            }
            this.addForm.flowId = fatherItem.flowId;
        },

        getSelectRoleList(fatherItem, sonItem) {
            var data = {};

            API.role.getFlowSelectRoleList(data).then((res) => {
                this.roleOptions = res.result;

                if (this.type == 2) {
                    //编辑时 角色取列表数据

                    for (let index = 0; index < this.roleOptions.length; index++) {
                        const indexData = this.roleOptions[index];

                        if (indexData.roleId == sonItem.approverRole) {
                            this.addForm.roleType = indexData.roleId;
                            this.roleTypeName = indexData.rolename;
                        }
                    }
                } else {
                    //新增时 角色默认第一个
                    if (this.roleOptions.length > 0) {
                        this.addForm.roleType = this.roleOptions[0].roleId;
                        this.roleTypeName = this.roleOptions[0].rolename;
                    }
                }
            });
        },

        getType(name) {
            if (this.isChinese(name)) {
                //全是中文，代表用户没有选择，为默认值，或者
                for (var i = 0; i < this.roleOptions.length; i++) {
                    if (this.roleOptions[i].rolename === name) {
                        this.addForm.roleType = this.roleOptions[i].roleId;
                        return this.roleOptions[i].roleId;
                    }
                }
            } else {
                //选择之后，name为代码id
                for (var i = 0; i < this.roleOptions.length; i++) {
                    if (this.roleOptions[i].roleId === name) {
                        this.addForm.roleType = this.roleOptions[i].roleId;
                        return this.roleOptions[i].roleId;
                    }
                }
            }
        },

        //是否全是 中文
        isChinese(temp) {
            var re = /[^\u4e00-\u9fa5]/;
            if (re.test(temp)) return false;
            return true;
        },

        //获取驳回类型
        getRejectAction(name) {
            if (this.isChinese(name)) {
                //全是中文，代表用户没有选择，为默认值，或者
                for (var i = 0; i < this.rejectToNamePtions.length; i++) {
                    if (this.rejectToNamePtions[i].Name === name) {
                        this.addForm.rejectAction = this.rejectToNamePtions[i].Id;
                        return this.rejectToNamePtions[i].Id;
                    }
                }
            } else {
                //选择之后，name为代码id
                for (var i = 0; i < this.rejectToNamePtions.length; i++) {
                    if (this.rejectToNamePtions[i].Id === name) {
                        this.addForm.rejectAction = this.rejectToNamePtions[i].Id;
                        return this.rejectToNamePtions[i].Id;
                    }
                }
            }
        },
        getRejectActionName(id) {
            for (var i = 0; i < this.rejectToNamePtions.length; i++) {
                if (this.rejectToNamePtions[i].Id === id) {
                    this.addForm.rejectAction = this.rejectToNamePtions[i].Id;
                    return this.rejectToNamePtions[i].Name;
                }
            }
        },

        // 获取通过后动作
        getApproveAction(name) {
            if (this.isChinese(name)) {
                //全是中文，代表用户没有选择，为默认值，或者
                for (var i = 0; i < this.approveActionPtions.length; i++) {
                    if (this.approveActionPtions[i].Name === name) {
                        this.addForm.approveAction = this.approveActionPtions[i].Id;
                        return this.approveActionPtions[i].Id;
                    }
                }
            } else {
                //选择之后，name为代码id
                for (var i = 0; i < this.approveActionPtions.length; i++) {
                    if (this.approveActionPtions[i].Id === name) {
                        this.addForm.approveAction = this.approveActionPtions[i].Id;
                        return this.approveActionPtions[i].Id;
                    }
                }
            }
        },
        getApproveActionName(Id) {
            for (var i = 0; i < this.approveActionPtions.length; i++) {
                if (this.approveActionPtions[i].Id === Id) {
                    this.addForm.approveAction = this.approveActionPtions[i].Id;
                    return this.approveActionPtions[i].Name;
                }
            }
        },
        handleChecked() {
            console.log('选中的值：', this.checkList);
        },

        //- 新增或编辑
        addAndEditSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let params = cloneDeep(this.addForm);
                    //审批类型
                    params.approverType = this.radio;
                    if (this.radio == '0') {
                        //选择角色
                        params.approverRole = this.getType(this.roleTypeName);
                    }
                    //驳回类型
                    params.rejectAction = this.getRejectAction(this.rejectToName);

                    //通过后动作
                    params.approveAction = this.getApproveAction(this.approveAction);

                    //通知类型： NO: 无通知; YES: 接收通知
                    if (this.checkList.length > 0) {
                        params.smsType = 'YES';
                    } else {
                        params.smsType = 'NO';
                    }

                    // 1. 新增    ,   2.编辑
                    var tick = this.type == 1 ? API.approvalProcessManage.addStep(params) : API.approvalProcessManage.UpdateStep(params);

                    tick.then((data) => {
                        if (data.code == '0000') {
                            this.$message({
                                message: `${this.type == 2 ? '修改成功' : '新增成功'}`,
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    
                                    this.clearForm();
                                    this.dialogVisible = false;
                                    this.$emit('refreshDataList');
                                }
                            });
                        } else {
                            this.$message.error(res.message);
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
};
</script>

<style>
</style>